<template>
  <div>
    <el-card>
      <CategroySelector @changeCategory="changeCategory"></CategroySelector>
     
    </el-card>

     <el-card style="margin-t">
       <!-- 列表页面 -->
      <div v-show="isShowList">
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="!category3Id"
          @click="showAddDiv"
          >添加属性</el-button
        >
        <el-table :data="attrList" border style="width: 100%">
          <el-table-column
            type="index"
            align="center"
            prop="prop"
            label="序号"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="150">
          </el-table-column>
          <el-table-column prop="prop" label="属性值列表" width="width">
            <template slot-scope="{ row, $index }">
              <el-tag
                type="danger"
                v-for="(attrValue, index) in row.attrValueList"
                :key="attrValue.id"
                >{{ attrValue.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="150">
            <template slot-scope="{ row, $index }">
              <HintButton
                type="warning"
                size="mini"
                icon="el-icon-edit"
                title="修改"
                @click="showUpdateDIv(row)"
              ></HintButton>
              <HintButton
                type="danger"
                size="mini"
                icon="el-icon-delete"
                title="删除"
              ></HintButton>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加或修改页面 -->
      <div v-show="!isShowList">
        <el-form :inline="true" :model="attrForm">
          <el-form-item label="属性名">
            <el-input v-model="attrForm.attrName" placeholder="请输入属性名"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus" @click="addAttrValue">添加属性值</el-button>
        <el-button @click="isShowList = true">取消</el-button>

        <el-table :data="attrForm.attrValueList" border style="width: 100%; margin: 20px 0">
          <el-table-column
            type="index"
            align="center"
            prop="prop"
            label="序号"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="prop" label="属性值名称" width="width">
            <template slot-scope="{row,$index}">
              <el-input v-model="row.valueName" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
          </el-table-column>
        </el-table>
        <el-button type="primary">保存</el-button>
        <el-button @click="isShowList = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AttrList',
  data(){
    return {
      // data内部不能用this
      category1Id: "",
      category2Id: "",
      category3Id: "",
      attrList: [],

      isShowList: true,

       // 收集数据最终收集成什么样子是从接口文档来的
      attrForm: {
        categoryLevel: 3,
        attrName: "",
        attrValueList: [
          // {
            // attrId: 0,
            // id: 0,
            // valueName: "string",
          // },
        ],
        categoryId: 0,
      },
    };
  },
    
  

  methods: {
    changeCategory({ categoryId, level }) {
      if (level === 1) {
        // 父组件获取到1级id要清空自己的23级id及属性列表数据
        this.category2Id = "";
        this.category3Id = "";
        this.attrList = [];

        this.category1Id = categoryId;
      } else if (level === 2) {
        // 父组件获取到2级id要清空自己的3级id及属性列表数据
        this.category3Id = "";
        this.attrList = [];

        this.category2Id = categoryId;
      } else {
        // 父组件获取到3级id要请求获取属性列表数据
        this.category3Id = "";
        this.attrList = [];

        this.category3Id = categoryId;
        this.getAttrList();
      }
    },
   //请求获取属性列表数据
     async getAttrList() {
      let { category1Id, category2Id, category3Id } = this;
      try {
        const result = await this.$API.attr.getList(
          category1Id,
          category2Id,
          category3Id
        );
        if (result.code === 200 || result.code === 20000) {
          this.attrList = result.data;
        }
      } catch (error) {
        this.$message.error("请求获取属性列表失败");
      }
    },

    // 点击添加属性按钮显示添加属性页面
     showAddDiv() {
      this.isShowList = false;
      this.attrForm = {
        categoryLevel: 3,
        attrName: "",
        attrValueList: [
          
        ],
        categoryId: this.category3Id,
      }
    },

      showUpdateDIv(row){
      this.isShowList = false
       this.attrForm = cloneDeep(row)
      },

      //点击添加属性值
      addAttrValue(){
      this.attrForm.attrValueList.push({
        attrId: this.attrForm.id,
          valueName:"",
        })
      }
    
  }
}
</script>

<style>

</style>
